<template>
	<view>
		<van-toast id="van-toast"></van-toast>
		<!-- 搜索商品区域 -->
		<van-search :value="searchValue" placeholder="搜本店" />
		<!-- s店铺标题区域 -->
		<view class="top-area">
			<image :src="merchantDetailObj.photo"></image>
			<view class="merchant-info">
				<text>{{ merchantDetailObj.merchantsname }}</text>
				<text>{{ merchantDetailObj.num }}人关注</text>
			</view>
			<van-button round type="info" @click="favThisMerchant">关注店铺</van-button>
		</view>
		<!-- 店铺商品展示区域 -->
		<view class="goods-area">
			<block v-for="item in merchantGoodsList" :key="item.goodsid">
				<index-good :item="item" style="width: 46%;margin: 15rpx;border-radius: 5px;padding: 10px 0;background-color: white;" @click.native="gotoGoodsDetail(item.goodsid, item.goodsmerchantsid)"></index-good>
			</block>
		</view>
	</view>
</template>

<script>
import Toast from '../../wxcomponents/vant-weapp/toast/toast'
	export default {
		onLoad(state) {
			this.merchantId = state.mid
			this.getMerchantsInfo()
			this.getMerchantGoods()
		},
		data() {
			return {
				// 商家id
				merchantId: '',
				// 与搜索框绑定的值
				searchValue: '',
				// 存储此商家的详细信息
				merchantDetailObj: {},
				// 商家在售商品信息列表
				merchantGoodsList: []
			}
		},
		methods: {
			// 获取商家详情
			async getMerchantsInfo() {
				const { data: res } = await uni.$http.get('/merchant/detail', { id: this.merchantId })
				if(res.meta.status !== 200) return Toast.fail('加载失败稍后再试')
				this.merchantDetailObj = res.recordset[0]
			},
			// 获取商家在售商品信息列表
			async getMerchantGoods() {
				const { data: res } = await uni.$http.get('/merchant/goods', { id: this.merchantId })
				if(res.meta.status !== 200) return Toast.fail('加载失败稍后再试')
				this.merchantGoodsList = res.recordset
			},
			// 商品介绍页被点击时将会跳转至商品详情页
			gotoGoodsDetail(id, mid) {
				uni.navigateTo({
					url: `../../subpages/goodsdetail/goodsdetail?id=${ id }&mid=${ mid }`
				})
			},
			// 关注店铺按钮被点击时触发
			async favThisMerchant() {
				console.log('haha')
				const { data: res } = await uni.$http.post('/user/favadd', { uid: uni.getStorageSync('uid'), mid: this.merchantId } )
				if(res.meta.status !== 200) return Toast.fail(res.meta.message)
				Toast.success('关注成功')
				this.getMerchantsInfo()
			}
		}
	}
</script>

<style>
	.top-area {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 10rpx;
	}
	
	.top-area image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}
	
	.merchant-info {
		width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.merchant-info text {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.goods-area {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
</style>
